<style>
    .xxpayPopupDiv .layui-form-label {
        width: 160px;
    }
    .xxpayPopupDiv .layui-input , .layui-textarea{
        width: 80%;
    }
    #cDInfo td {
        border: none;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付接口参数模板</li>
            </ul>
            <div class="layui-tab-content">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">接口类型</label>
                        <div class="layui-input-inline" style="width:30%">
                            <input type="text" id="ifTypeInfo" autocomplete="off" class="layui-input" readonly>
                            <input type="hidden" id="ifTypeCode" name='ifTypeCode' >
                        </div>
                        <label class="layui-form-label">模板名称</label>
                        <div class="layui-input-inline" style="width:30%">
                        	<input type="text" name="templateName" placeholder="请输入模板名称" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板状态</label>
                        <div class="layui-input-inline" style="width:30%">
                            <input type="radio" name="status" title="开启" value="1" checked />
                            <input type="radio" name="status" title="关闭" value="0" />
                        </div>
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-inline" style="width:30%">
                            <input type="text" name="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">渠道商户ID</label>
                        <div class="layui-input-inline" style="width:30%">
                            <input name="passageMchIdTemplate" placeholder="请输入渠道商户ID" required lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <fieldset class="layui-elem-field layui-hide" id='tempFieldSet'>
                    	<legend><button class='layui-btn layui-btn-xs layui-btn-danger'>账户配置模板</button></legend>
                        <div id="paramInfo"></div>
                 	</fieldset>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="add">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','table','util','admin','view', 'upload'],function(){
        var form = layui.form
        , $ = layui.$
        , admin = layui.admin
        , layer = layui.layer 
        , element = layui.element
        , view = layui.view
        , table = layui.table
        ,upload = layui.upload
        ,setter = layui.setter;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息
        var ifTypeCode = view.getOpenParams('ifTypeCode');
        $("#ifTypeCode").val(ifTypeCode);
        
        $('#btnBack_Param').on('click', function() {
            location.hash = '/config/pay_interface_type/template//ifTypeCode=' + ifTypeCode;
        });

        form.render();
        
        
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/pay_interface_type/get',
            data: {
                ifTypeCode:ifTypeCode,
            },
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                	$('#ifTypeInfo').val(res.data.ifTypeName + "[ " + res.data.ifTypeCode + " ]");
                    
                    if(!res.data.param){
						return false;
                    }
                    
                    var jsonObj = "";
                	try{jsonObj = JSON.parse(res.data.param);}catch(err){}
                   
                    if(!jsonObj || (!(jsonObj instanceof Array)) ){
                		return false;
                    }
                    	
                    var htm = '';
                    $.each(jsonObj, function(i, obj){

                    	var thisValue = "";
                        htm += `
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"> ` + obj.desc + ` [` + obj.name + `]` +`</label>
                                            <div class="layui-input-block"> `;
                        if(obj.type == 'text') {
                            htm += ` <input type="text" value="`+thisValue+`" templateField="1" fieldname="` + obj.name + `" lay-verify="` + obj.verify + `" placeholder="请输入` + obj.desc + `" autocomplete="off" class="layui-input">`;
                        }else if(obj.type == 'textarea') {
                            htm += ` <textarea required templateField="1" fieldname="` + obj.name + `" lay-verify="` + obj.verify + `" placeholder="请输入` + obj.desc + `" class="layui-textarea">`+thisValue+`</textarea>`;
                        }else if(obj.type == 'radio') {

                            var optionArray =  obj.options.split(',');
                            for(var j = 0; j < optionArray.length; j++){

                                let radioName = optionArray[j].split('|')[0];
                                let radioVal = optionArray[j].split('|')[1];

                                var radioCheckedHtml = j == 0 ? "checked" :"";
                                htm += ` <input `+radioCheckedHtml+` templateField="2" fieldname="` + obj.name + `" type="radio" name="` + obj.name + `" lay-verify="` + obj.verify + `" value="` + radioVal + `" title="`+radioName+`">`;
                            }

                        }else if(obj.type == 'file') {

                            var fileName = "";
                            htm += `<input type="text" templateField="1" fieldname="` + obj.name + `" readonly style="width:320px; display: inline-block;" name="` + obj.name + `" lay-verify="` + obj.verify + `" value="` + fileName + `" placeholder="请上传` + obj.desc + `" autocomplete="off" class="layui-input">`;
                            var btnText = fileName ? "替换文件" : "上传文件";
                            htm += `<button class="uploadFileBtn layui-btn layui-btn-normal layui-btn-sm" type="button" style="margin-left: 20px;">`+btnText+`</button>`;
                            htm += `<span style="color:red; margin-left:20px" class="fileTip layui-hide">*点击[保存]按钮后文件生效</span>`;

                        }
                        htm += `   </div>
                                </div> `;

                    });
                    htm += ``;
                    $('#paramInfo').html(htm);

                    //上传文件接口
                    var headers = {};
                    upload.render({
                        url: layui.setter.baseUrl + '/config/pay_passage_account/uploadParamFile?access_token=' + layui.data(setter.tableName)[setter.request.tokenName]
                        ,elem: '.uploadFileBtn'
                        ,headers: headers
                        ,accept: 'file'
                        ,done: function(res, index, upload){

                            if(res.code != 0){ //上传失败
                                return layer.msg('上传失败');
                            }
                            layer.msg('上传成功！');
                            var uploadFileName = res.data;
                            var btnElem = $(this.item);
                            btnElem.prev().val(uploadFileName);
                            btnElem.parent().find('.fileTip').removeClass("layui-hide");
                        }
                    });


                    $('#tempFieldSet').removeClass('layui-hide');

                    form.render();
                }else{
                    layer.alert(res.msg,{title:"请求失败"})
                }
            }
        });
        
        
        
 		form.on('submit(add)', function(data){

        	var paramTemplate = "";
       		//获取参数
           	var tempObj = {};
           	$.each($("form").find('input[fieldname][templateField="1"],textarea[fieldname][templateField="1"]'), function(){
           		var name = $(this).attr('fieldname');
           	    tempObj[name] = $(this).val();
           	});

            $.each($("form").find('input[type="radio"][templateField="2"]:checked'), function(){
                var name = $(this).attr('fieldname');
                tempObj[name] = $(this).val();
            });
           	
           	paramTemplate = JSON.stringify(tempObj);
        	
        	data.field.paramTemplate = paramTemplate;
        	
            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/pay_interface_type/template/add', //模拟接口,
                data: data.field,
                error: function(err){layer.alert(err.msg,{title:"请求失败"})},
                success: function(res){
                    if(res.code == 0){
                        layer.alert(res.msg, {title: '保存成功'},function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        });
                    }
                }
            })
            return false;
        });
    })
</script>